<template>
  <div class="segmentation-view">
    <div class="toolbar">
      <el-button-group>
        <el-button
          v-for="mode in viewModes"
          :key="mode.type"
          :type="currentMode === mode.type ? 'primary' : 'default'"
          @click="setViewMode(mode.type)"
        >
          <el-icon>
            <component :is="mode.icon" />
          </el-icon>
          {{ mode.label }}
        </el-button>
      </el-button-group>

      <el-divider direction="vertical" />

      <el-button-group>
        <el-button
          v-for="tool in editTools"
          :key="tool.type"
          :type="currentTool === tool.type ? 'primary' : 'default'"
          @click="setEditTool(tool.type)"
        >
          <el-icon>
            <component :is="tool.icon" />
          </el-icon>
          {{ tool.label }}
        </el-button>
      </el-button-group>

      <el-divider direction="vertical" />

      <div class="view-controls">
        <el-tooltip content="查看统计">
          <el-button type="primary" @click="goToStatistics">
            <el-icon><DataLine /></el-icon>
            统计分析
          </el-button>
        </el-tooltip>
        <el-tooltip content="生成报告">
          <el-button type="success" @click="goToReport">
            <el-icon><Document /></el-icon>
            生成报告
          </el-button>
        </el-tooltip>
      </div>
    </div>

    <div class="viewer-container">
      <div class="view-panel" ref="viewContainer">
        <!-- 2D/3D视图容器 -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import {
  View,
  Grid,
  Edit,
  Delete,
  Plus,
  Remove,
  Brush,
  Select,
  DataLine,
  Document
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import vtkFullScreenRenderWindow from '@kitware/vtk.js/Rendering/Misc/FullScreenRenderWindow'
import { useRouter, useRoute } from 'vue-router'

// 视图模式
const viewModes = [
  { type: '2d', label: '2D视图', icon: Grid },
  { type: '3d', label: '3D视图', icon: View }
]

// 编辑工具
const editTools = [
  { type: 'brush', label: '画笔', icon: Brush },
  { type: 'eraser', label: '橡皮擦', icon: Delete },
  { type: 'fill', label: '填充', icon: Plus },
  { type: 'select', label: '选择', icon: Select }
]

// 状态变量
const currentMode = ref('2d')
const currentTool = ref('select')
const viewContainer = ref(null)

// VTK.js相关变量
let renderWindow: any
let renderer: any

const router = useRouter()
const route = useRoute()

// 初始化
onMounted(async () => {
  if (!viewContainer.value) return
  
  // 初始化VTK渲染器
  renderWindow = vtkFullScreenRenderWindow.newInstance({
    container: viewContainer.value,
    background: [0, 0, 0]
  })
  
  renderer = renderWindow.getRenderer()
  
  // 加载数据
  await loadData()
})

// 清理
onUnmounted(() => {
  if (renderWindow) {
    renderWindow.delete()
  }
})

// 加载数据
const loadData = async () => {
  try {
    // 这里实现数据加载逻辑
    // 1. 加载原始影像
    // 2. 加载分割结果
    // 3. 设置显示属性
  } catch (error) {
    console.error('Error loading data:', error)
    ElMessage.error('加载数据失败')
  }
}

// 设置视图模式
const setViewMode = (mode: string) => {
  currentMode.value = mode
  // 实现2D/3D切换逻辑
}

// 设置编辑工具
const setEditTool = (tool: string) => {
  currentTool.value = tool
  // 实现工具切换逻辑
}

// 添加导航方法
const goToStatistics = () => {
  router.push('/statistics')
}

const goToReport = () => {
  router.push('/report')
}
</script>

<style scoped>
.segmentation-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  background-color: #000;
}

.toolbar {
  padding: 10px;
  background-color: #fff;
  border-bottom: 1px solid var(--el-border-color-light);
  display: flex;
  gap: 20px;
  align-items: center;
  z-index: 1;
}

.viewer-container {
  flex: 1;
  display: flex;
  position: relative;
}

.view-panel {
  flex: 1;
  position: relative;
}
</style> 